<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生命周期</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div id="app"></div>
    <script src="../dist/yox.js"></script>
    <script id="template1" type="plain/text">
      <div id="custom-component">
        {{counter}}
      </div>
    </script>
    <script id="template2" type="plain/text">
      <div id="root">
          <button on-click="increase('counter')">
              increase
          </button>
          <p>
              {{counter}}
          </p>
          {{#if counter % 4 !== 0}}
          <Custom counter="{{counter}}" />
          {{/if}}
      </div>
    </script>
    <script>

        var Custom = {
            template: '#template1',
            beforeCreate: function (options) {
                console.log('    beforeCreate', options);
            },
            afterCreate: function () {
                console.log('    afterCreate');
            },
            beforeMount: function () {
                console.log('    beforeMount');
            },
            afterMount: function () {
                console.log('    afterMount');
            },
            beforeUpdate: function () {
                console.log('    beforeUpdate');
            },
            afterUpdate: function () {
                console.log('    afterUpdate');
            },
            beforeDestroy: function () {
                console.log('    beforeDestroy');
            },
            afterDestroy: function () {
                console.log('    afterDestroy');
            }
        };

        var instance = new Yox({
            el: '#app',
            data: {
              counter: 0,
            },
            template: '#template2',
            components: {
                Custom: Custom
            },
            beforeCreate: function (options) {
                console.log('beforeCreate', options);
            },
            afterCreate: function () {
                console.log('afterCreate');
            },
            beforeMount: function () {
                console.log('beforeMount');
            },
            afterMount: function () {
                console.log('afterMount');
            },
            beforeUpdate: function () {
                console.log('beforeUpdate');
            },
            afterUpdate: function () {
                console.log('afterUpdate');
            },
            beforeDestroy: function () {
                console.log('beforeDestroy');
            },
            afterDestroy: function () {
                console.log('afterDestroy');
            }
        });

    </script>
</body>
</html>
